<template>
	<view class="person ">
		<watermark></watermark>
		<scroll-view scroll-y @scrolltolower="getMore">
			<view class="zyjz selector center">
				<view class="selector-li left-radius" :class="{active:type==='borrows'}" @click="changeTab('borrows')">
					借
				</view>
				<view class="selector-li right-radius" :class="{active:type==='returns'}" @click="changeTab('returns')">
					还
				</view>
			</view>
			<view class="text-center mgn-t-30 mgn-b-30" @click="toggle('top')">
				<text class="uni-nav-bar-text mgn-r-10 clAAA">{{warehouse.text}}</text>
				<uni-icons type="arrowdown" color="#aaa" size="18" />
			</view>
			<view class="goods  zyjz f26 cl343 flex-start-c " v-for="(item,int) in items" :key="int">
				<image :src="item.img" mode="widthFix"></image>
				<view class="mgn-l-20" style="width:68%">
					<block v-if="type === 'returns'">
						<view class="omit1">
							{{item.goods_name}}
						</view>
						<view class="f26 mgn-t-30">
							{{item.o_num}}
						</view>
						<view class="f24 clAAA mgn-t-40">
							借时间：{{item.m_time}}
						</view>
					</block>

					<block v-else>
						<block v-if="item.num != 0 && infoData.type === 'admin'">
							<view class=" zyjz">
								<view class="omit1" style="width: 74%;">{{item.goods_name}}</view>
								<button style="width: 130rpx;" class="mini-btn" type="primary" size="mini"
									@click="onConsume(item)">消耗</button>
							</view>
							<view class="f26 mgn-t-30">
								<uni-number-box v-model="item.cNum" :max="item.num" />
							</view>
							<view class="f24 clAAA mgn-t-40">
								借时间：{{item.m_time}}
							</view>
						</block>

						<block v-else>
							<view class="omit1">
								{{item.goods_name}}
							</view>
							<view class="f26 mgn-t-20 cl3e8">
								<text>借：{{item.o_num}}</text>
								<text class="mgn-l-20">还：{{item.returns_num}}</text>
							</view>
							<view class="f24 clAAA mgn-t-20">
								借时间：{{item.m_time}}
							</view>
							<!-- <view class="f24 clAAA mgn-t-20">
							还时间：2023-10-10
						</view> -->
						</block>
					</block>
				</view>
			</view>
		</scroll-view>

		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="text-center">
				<view class="pad-t-20 pad-b-20" v-for="(item,int) in warehouseList" :key="int" @click="changeWarehouse(item)">
					{{item.text}}
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	import watermark from '@/components/watermark.vue'
	import mixins from '@/mixins/index.js'
	import business from '@/mixins/business.js'
	export default {
		mixins: [mixins, business],
		components: {
			watermark
		},
		data() {
			return {
				lists_url: 'logs_details',
				param: {
					page: 1,
					size: 20,
					w_id: null,
					type: 'borrows',
					parent_type: null,
					parent_type_id: null
				},
				items: [],
				warehouse: {},
				type: 'borrows',
				classId: ''
			}
		},
		onLoad(e) {
			if (e && e.type) {
				this.param.parent_type = e.type
				this.param.parent_type_id = e.typeId
				this.classId = e.classId
			}
			this.getWarehouse(() => {
				this.warehouse = this.warehouseList[0]
				this.getDet()
			}, this.infoData.user_id)
		},
		methods: {
			onConsume(e) {
				if (e.cNum === 0) return this.api.msg('请输入消耗数量')
				const obj = {
					w_goods_id: e.w_goods_id,
					num: e.cNum,
					class_id: this.classId
				}
				this.api.get('consumption', obj).then(res => {
					this.api.msg(res.msg)
					setTimeout(() => {
						this.getDet()
					}, 2000)
				})
			},
			changeTab(e) {
				this.type = e
				this.getDet()
			},
			changeWarehouse(e) {
				this.warehouse = e
				this.$refs.popup.close()
				this.getDet()
			},
			getDet() {
				this.items = []
				this.param.type = this.type
				this.param.w_id = this.warehouse.id
				this.param.page = 1
				this.get_lists(() => {
					for (let i in this.items) {
						this.$set(this.items[i], 'cNum', 0)
					}
				})
			},
			gogo() {
				// this.go('./review')
				this.go('../commom/inReview')
			},
			toggle(type) {
				this.popupType = type
				this.$refs.popup.open(type)
			},
		}
	}
</script>

<style lang="less">
	.person {
		.selector {

			.selector-li {
				padding: 15rpx 100rpx;
				background: #DDEBFF;
				border: 2rpx solid #3E86F4;
				font-size: 26rpx;
			}

			.left-radius {
				border-radius: 8rpx 0rpx 0rpx 8rpx;
			}

			.right-radius {
				border-radius: 0rpx 8rpx 8rpx 0rpx;
			}

			.active {
				background: #3E86F4;
				color: #fff;
			}
		}

		.list {
			border-bottom: 1px solid #f7f7f7;

			.time {
				width: 80rpx;
				height: 80rpx;
				vertical-align: middle;
				text-align: center;
				background: #DDEBFF;
				border-radius: 50%;
			}
		}

		.goods {
			position: relative;
			padding: 20rpx 0;
			margin: 0 20rpx;
			border-bottom: 1px solid #f7f7f7;

			.out {
				position: absolute;
				top: 20rpx;
				left: 0rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				text {
					position: absolute;
					top: 10rpx;
					left: 5rpx;
				}
			}

			image {
				width: 200rpx;
				height: 150rpx;
			}

			.clff0 {
				color: #FF0000;
			}

			.cl3e8 {
				color: #3E86F4;
			}

			.mini-btn {
				background: #3E86F4;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}
	}
</style>